<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
				</view>
				<view v-if="openMore" @click="openToggle" hover-class="buttonHover"
					style="display: flex;justify-content: center;color: #eb884c;padding-top: 6px;background-color: #eeeeee;height: 26px;width: 62px;">
					筛选<uni-icons type="tune" size="14"></uni-icons>
				</view>
				<view v-else @click="closeToggle" hover-class="buttonHover"
					style="display: flex;justify-content: center;color: #eb884c;padding-top: 6px;background-color: #eeeeee;height: 26px;width: 62px;">
					筛选<uni-icons type="tune" size="14"></uni-icons>
				</view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item>
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<!--业务统计-->
					<!-- <view style="background-color: #ffffff;margin: 10px;padding: 15px;border-radius: 12px;">
						<uni-segmented-control :current="current1" :values="items1" 
							:active-color="activeColor" @clickItem="onClickItem1" />
					</view> -->
					<view style="display: flex;position: sticky;top: 0;z-index: 9;background-color: #f5f5f5;">
						<view @click="onClickItem1(index)" v-for="(item,index) in items1" :key="index" style="background-color: #ffffff;margin: 10px;padding:6px;width: 45px;height:15px;border-radius: 12px;display: flex;justify-content: center;align-items: center;">
							<text  :style="{color:current1===index?'#bf5f09':'#000000'}">{{item}}</text>
						</view>
					</view>
					<view v-if="current1 === 0">
						<client ref="client" :data="formData_client" :time="range_client" />
					</view>
					<view v-else-if="current1 === 1">
						<freightage ref="freightage" :data="formData_freightage" :time="range_freightage" />
					</view>
		        </scroll-view>
		    </swiper-item>
			<swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<!--承运统计-->
					<!-- <view style="background-color: #ffffff;margin: 10px;padding: 15px;border-radius: 12px;">
						<uni-segmented-control :current="current2" :values="items2" 
							:active-color="activeColor" @clickItem="onClickItem2" />
					</view> -->
					<view style="display: flex;position: sticky;top: 0;z-index: 9;background-color: #f5f5f5;">
						<view @click="onClickItem2(index)" v-for="(item,index) in items2" :key="index" style="background-color: #ffffff;margin: 10px;padding:6px;width: 45px;height:15px;border-radius: 12px;display: flex;justify-content: center;align-items: center;">
							<text  :style="{color:current2===index?'#bf5f09':'#000000'}">{{item}}</text>
						</view>
					</view>
					<view v-if="current2 === 0">
						<driver ref="driver" :data="formData_driver" :time="range_driver" />
					</view>
					<view v-else-if="current2 === 1">
						<route ref="route" :data="formData_route" :time="range_route" />
					</view>
					<view v-else-if="current2 === 2">
						<car ref="car" :data="formData_car" :time="range_car" />
					</view>
			    </scroll-view>
			</swiper-item>
			<swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'">
					<!--财务统计-->
					<!-- <view style="background-color: #ffffff;margin: 10px;padding: 15px;border-radius: 12px;">
						<uni-segmented-control :current="current3" :values="items3" 
							:active-color="activeColor" @clickItem="onClickItem3" />
					</view> -->
					<view style="display: flex;position: sticky;top: 0;z-index: 9;background-color: #f5f5f5;">
						<view @click="onClickItem3(index)" v-for="(item,index) in items3" :key="index" style="background-color: #ffffff;margin: 10px;padding:6px;width: 65px;height:15px;border-radius: 12px;display: flex;justify-content: center;align-items: center;">
							<text :style="{color:current3===index?'#bf5f09':'#000000'}">{{item}}</text>
						</view>
					</view>
					<view v-if="current3 === 0">
						<agentPay ref="agentPay" :data="formData_agentPay" :time="range_agentPay" />
					</view>
			    </scroll-view>
			</swiper-item>
		</swiper>
		<!-- 顶部操作弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @maskClick="closeToggle">
			<view style="margin-top: 30px;border-radius: 20px;">
				<view style="width: 100%;display: flex;justify-content: center;align-items: center;">
					<view v-if="tabIndex===0">
						<view v-if="current1 === 0">
							<uni-forms :modelValue="formData_client" label-width="75px">
								<view style="width: 270px;">
									<uni-forms-item label="客户名称">
										<uni-easyinput  v-model="formData_client.customerName" placeholder="请输入客户名称"></uni-easyinput>
									</uni-forms-item>
									<uni-forms-item label="客户类型">
										<uni-data-select :clear="false" v-model="formData_client.customerType" :localdata="customerType"
											style="background-color: white;" />
									</uni-forms-item>
									<uni-forms-item label="时间范围">
										<uni-datetime-picker  v-model="range_client" type="daterange" />
									</uni-forms-item>
								</view>
							</uni-forms>
							<button @click="reset('client')" style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 15px;margin-bottom: 10px;" size="mini">重置</button>
						</view>
						<view v-else-if="current1 === 1">
							<uni-forms :modelValue="formData_freightage" label-width="75px">
								<view style="width: 270px;">
									<uni-forms-item label="货物名称">
										<uni-easyinput v-model="formData_freightage.goodsName" placeholder="请输入货物名称"></uni-easyinput>
									</uni-forms-item>
									<uni-forms-item label="货物类型">
										<uni-data-select v-model="formData_freightage.goodsType" clear :localdata="goodsType"
											style="background-color: white;" />
									</uni-forms-item>
									<uni-forms-item label="时间范围">
										<uni-datetime-picker  v-model="range_freightage" type="daterange" />
									</uni-forms-item>
								</view>
							</uni-forms>
							<button @click="reset('freightage')" style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 15px;margin-bottom: 10px;" size="mini">重置</button>
						</view>
					</view>
					<view v-else-if="tabIndex===1">
						<view v-if="current2 === 0">
							<uni-forms :modelValue="formData_driver" label-width="75px">
								<view style="width: 270px;">
									<uni-forms-item label="司机名称">
										<uni-easyinput  v-model="formData_driver.driverName" placeholder="请输入司机名称"></uni-easyinput>
									</uni-forms-item>
									<uni-forms-item label="司机类型">
										<uni-data-select v-model="formData_driver.driverType" clear :localdata="driverType"
											style="background-color: white;" />
									</uni-forms-item>
									<uni-forms-item label="时间范围">
										<uni-datetime-picker  v-model="range_driver" type="daterange" />
									</uni-forms-item>
								</view>
							</uni-forms>
							<button @click="reset('driver')" style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 15px;margin-bottom: 10px;" size="mini">重置</button>
						</view>
						<view v-if="current2 === 1">
							<uni-forms :modelValue="formData_route" label-width="75px">
								<view style="width: 270px;">
									<uni-forms-item label="线路名称">
										<uni-easyinput  v-model="formData_route.lineName" placeholder="请输入线路名称"></uni-easyinput>
									</uni-forms-item>
									<uni-forms-item label="时间范围">
										<uni-datetime-picker  v-model="range_route" type="daterange" />
									</uni-forms-item>
								</view>
							</uni-forms>
							<button @click="reset('route')" style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 15px;margin-bottom: 10px;" size="mini">重置</button>
						</view>
						<view v-if="current2 === 2">
							<uni-forms :modelValue="formData_car" label-width="75px">
								<view style="width: 270px;">
									<uni-forms-item label="车牌号">
										<uni-easyinput  v-model="formData_car.licensePlate" placeholder="请输入车牌号"></uni-easyinput>
									</uni-forms-item>
									<uni-forms-item label="车型">
										<uni-data-select v-model="formData_car.carType" clear :localdata="carType"
											style="background-color: white;" />
									</uni-forms-item>
									<uni-forms-item label="时间范围">
										<uni-datetime-picker  v-model="range_car" type="daterange" />
									</uni-forms-item>
								</view>
							</uni-forms>
							<button @click="reset('car')" style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 15px;margin-bottom: 10px;" size="mini">重置</button>
						</view>
					</view>
					<view v-else-if="tabIndex===2">
						<view v-if="current3 === 0">
							<uni-forms :modelValue="formData_agentPay" label-width="90px">
								<view style="width: 270px;">
									<uni-forms-item label="客户名称">
										<uni-easyinput  v-model="formData_agentPay.customerName" placeholder="请输入客户名称"></uni-easyinput>
									</uni-forms-item>
									<uni-forms-item label="时间范围">
										<uni-datetime-picker  v-model="range_agentPay" type="daterange" />
									</uni-forms-item>
								</view>
							</uni-forms>
							<button @click="reset('agentPay')" style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 15px;margin-bottom: 10px;" size="mini">重置</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</div>
</template>

<script>
	import client from './businessStatictics/client.vue'
	import freightage from './businessStatictics/freightage.vue'
	import driver from './carrierStatistics/driver.vue'
	import route from './carrierStatistics/route.vue'
	import car from './carrierStatistics/car.vue'
	import agentPay from './financeStatistics/agentPay.vue'
	
	import {getDicts} from '@/api/system/dict.js'
	
	export default {
		components: {
			client,
			freightage,
			driver,
			route,
			car,
			agentPay
		},
		data() {
			return {
				itemsArr: ['业务统计','承运统计','财务统计'],
				tabIndex: 0,
				scrollH: 700,
				scrollInto: '',
				openMore: true,
				current1: 0,
				items1: ['客户', '货物'],
				activeColor: '#bf5f09',
				current2: 0,
				items2: ['司机', '线路','车辆'],
				current3: 0,
				items3: ['代收贷款'],
				formData_client: {
					customerName: '',
					customerType: 2,
					endDate: undefined,
					startDate: undefined
				},
				formData_freightage: {
					goodsName: '',
					goodsType: '',
					endDate: undefined,
					startDate: undefined
				},
				formData_driver: {
					driverName:'',
					driverType:'',
					endDate: undefined,
					startDate: undefined
				},
				formData_route: {
					lineName:'',
					endDate: undefined,
					startDate: undefined
				},
				formData_car: {
					licensePlate:'',
					carType:'',
					endDate: undefined,
					startDate: undefined
				},
				formData_agentPay: {
					customerName:'',
					endDate: undefined,
					startDate: undefined
				},
				//日期范围
				range_client: [],
				range_freightage: [],
				range_driver: [],
				range_route: [],
				range_car: [],
				range_agentPay: [],
				
				//下拉框 ->客户类型
				customerType: [
					{
						text: '收货方',
						value: 1,
					},
					{
						text: '发货方',
						value: 2
					}
				],
				//下拉框 ->货物类型
				goodsType: [],
				//下拉框 ->司机类型
				driverType: [],
				driverType_: [],
				//下拉框 ->车型
				carType: [],
				carType_: [],
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		created() {
			//获取货物类型下拉框
			getDicts('goods_type').then(res=>{
				this.goodsType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			//获取司机类型下拉框
			getDicts('driver_type').then(res=>{
				this.driverType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
				res.data.forEach(item=>{
					this.driverType_[item.dictValue]=item.dictLabel
				})
			})
			//获取车型下拉框
			getDicts('car_type').then(res=>{
				this.carType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
				res.data.forEach(item=>{
					this.carType_[item.dictValue]=item.dictLabel
				})
			})
		},
		methods: {
			// 切换选项
			changeTab(index) {
			    if (this.tabIndex === index) {
			        return;
			    }
			    this.tabIndex = index;
			    // 滚动到指定元素
			    this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title:'正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
			    this.changeTab(e.detail.current);
			},
			//点击更多
			openToggle() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open('bottom')
				this.openMore = false
			},
			//关闭更多
			closeToggle() {
				this.$refs.popup.close()
				this.openMore = true
			},
			onClickItem1(e) {
				if (this.current1 !== e) {
					this.current1 = e
				}
			},
			onClickItem2(e) {
				// if (this.current2 !== e.currentIndex) {
				// 	this.current2 = e.currentIndex
				// }
				if (this.current2 !== e) {
					this.current2 = e
				}
			},
			onClickItem3(e) {
				// if (this.current3 !== e.currentIndex) {
				// 	this.current3 = e.currentIndex
				// }
				if (this.current3 !== e) {
					this.current3 = e
				}
			},
			// selectTime(item){
			// 	switch (item){
			// 		case 'client':
			// 			this.$refs.client.searchLog(this.formData_client,this.range_client)
			// 			break;
			// 		case 'freightage':
			// 			this.$refs.freightage.searchLog(this.formData_freightage,this.range_freightage)
			// 			break;
			// 		case 'driver':
			// 			this.$refs.driver.searchLog(this.formData_driver,this.range_driver)
			// 			break;
			// 		case 'route':
			// 			this.$refs.route.searchLog(this.formData_route,this.range_route)
			// 			break;
			// 		case 'car':
			// 			this.$refs.car.searchLog(this.formData_car,this.range_car)
			// 			break;
			// 		case 'agentPay':
			// 			this.$refs.agentPay.searchLog(this.formData_car,this.range_car)
			// 			break;
			// 		default:
			// 			break;
			// 	}
			// },
			reset(item){
				switch (item){
					case 'client':
						this.formData_client= {
							customerName: '',
							customerType: 2,
							endDate: undefined,
							startDate: undefined
						}
						this.range_client= []
						break;
					case 'freightage':
						this.formData_freightage= {
							goodsName: '',
							goodsType: '',
							endDate: undefined,
							startDate: undefined
						}
						this.range_freightage= []
						break;
					case 'driver':
						this.formData_driver= {
							driverName:'',
							driverType:'',
							endDate: undefined,
							startDate: undefined
						}
						this.range_driver= []
						break;
					case 'route':
						this.formData_route= {
							lineName:'',
							endDate: undefined,
							startDate: undefined
						}
						this.range_route= []
						break;
					case 'car':
						this.formData_car= {
							licensePlate:'',
							carType:'',
							endDate: undefined,
							startDate: undefined
						}
						this.range_car= []
						break;
					case 'agentPay':
						this.formData_agentPay= {
							customerName:'',
							endDate: undefined,
							startDate: undefined
						}
						this.range_agentPay= []
						break;
					default:
						break;
				}
				//关闭弹窗
				//this.closeToggle()
			},
			
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 15vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}

.buttonHover{
	opacity: 0.6;
}

::v-deep .vue-ref{
	border-radius: 12px;
}
</style>